<template>
  <div class="form-single-fragment" style="position: relative;">
    <el-form :model="detailData" label-width="100px" size="mini" label-position="right">
      <el-row :gutter="20" class="form-single-info">
        <el-col :span="20">
          <el-col :span="12">
            <el-form-item label="专家姓名">{{detailData.expertName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属地区">{{detailData.districtName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">{{detailData.telephone}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位属性">{{detailData.unitAttribute}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作单位">{{detailData.enterpriseName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职称">{{detailData.qualification}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务">{{detailData.post}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专家费（元）">{{detailData.fee}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执业资格">{{detailData.practiceQualification}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属部门">{{detailData.deptName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属行业">{{detailData.industryTypeName}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传附件">
              <div class="FileDoList" v-if="detailData.fileDoList">
                <div v-for="(item,index) in detailData.fileDoList" :key="index">
                  <span @click="filespreview(item)">{{item.fileName}}</span>
                  <strong @click="loadknowledgedownload(item)"><i class="el-icon-download"></i></strong>
                 </div>
              </div>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { ExpertKnowledge } from '@/api/knowledgeBases.js';
import Pdfpreview from '@/components/selector/Pdfpreview.vue';
export default {
  name: 'ExpertDetail',
  props: {
    ExpertId: {
      default: undefined
    }
  },
  data () {
    return {
      isShowloading: false,
      userId: null,
      detailData: {}
    };
  },
  mounted () {
    this.loadknowledgedetail()
  },
  methods: {
    /**
     * 知识库详情
     */
    loadknowledgedetail () {
      let params = this.ExpertId
      return new Promise((resolve, reject) => {
        ExpertKnowledge.detail(this, params).then(res => {
          this.detailData = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * pdf预览
     */
    filespreview (data) {
      let params = {
        files: data.pdfPath
      };
      this.$dialog.show(data.fileName, Pdfpreview, {
        area: ['100%', '100%']
      }, params).then(res => {
        this.loadknowledgedetail()
      }).catch(e => {
      });
    },
    /**
     * 文件下载
     */
    loadknowledgedownload (data) {
      if (data.fileType === 'jpg' || data.fileType === 'png') {
        window.open(data.pdfPath)
      } else {
        window.open(data.filePath)
      }
      // let params = {
      //   fileUrl: data.filePath,
      //   knowledgeId: this.knowledgeId
      // }
      // return new Promise((resolve, reject) => {
      //   CorporateKnowledge.download(this, params).then(res => {
      //     let url = window.URL.createObjectURL(new Blob([res.data]));
      //     let link = document.createElement('a');
      //     link.style.display = 'none';
      //     link.href = url;
      //     link.setAttribute('download', data.fileNamee); // 指定下载后的文件名，防跳转
      //     document.body.appendChild(link);
      //     link.click();
      //   }).catch(e => {
      //     reject(e);
      //   });
      // });
    }
  }
}
</script>

<style lang="scss" scoped>
h3{border-bottom: 1px solid #E9E9EB;padding: 0 0 10px;}
.table_container{margin: 10px 0;}
.form-single-info{display: flex;justify-content: center;}
.el-form-info{box-shadow: 0 0 10px rgba(0,0,0,0.05);padding: 20px;}
.el-form-info strong{margin: 0 10px;}
.el-form-info .el-time-picker{width: 100%;}
.FileDoList{
  cursor: pointer;
  div{
    span{margin-right: 10px;}
  }
  strong{color: #FF0000;}
}
</style>
